<!DOCTYPE html>

<!--
  Google HTML5 slide template

  Authors: Luke Mahé (code)
           Marcin Wichary (code and design)
           
           Dominic Mazzoni (browser compatibility)
           Charles Chen (ChromeVox support)

  URL: http://code.google.com/p/html5slides/
-->

<html>
  <head>
    <title>Presentation</title>
    <meta charset='utf-8'>
    <script src='./js/slides.js'></script>
   	<script type="text/javascript" src="./js/scripts.js"></script>
   	<script type="text/javascript" src="worker.js"></script>
   	<script src="./h5utils.js"></script>
    <link rel="stylesheet" href="./css/style_1.css">
    <style type="text/css">

	</style>
	
  </head>

  <body style='display: none'>

    <section class='slides layout-regular template-default'>
      
      <!-- Your slides (<article>s) go here. Delete or comment out the
           slides below. -->
     
      <article class='biglogo' style="background-color:#FFFFFF">
      </article>

      <article style="background-color:#89B101">
        <header>
			Môn:<br>
		</header>
        <br/>
		<h2 style="color:#036; font-size:40px; text-align:center; line-height:60px;">
			Các phương pháp lập trình hiện đại<br>
			2011
		</h2>
			<span  style="line-height:60px; color:#FFF; font-weight:bold">
		  <br><br>
          Điền Vũ An - 0812001
          <br/>
          Trần Huy Phúc - 0812387
		  <br/>
		  Hứa Minh Quang - 0812405
          </span>
        <br>
      </article>
      
      <article style="background-color:#E3EDFF; color:#000;">
      	<span style="font-size:40px; line-height:80px;">
        <header>Mục lục</header>
        
          <ul>
			<li style="color:#4F81BD"> Phần 1: HTML5</li>
			<li style="color:#C0504D"> Phần 2: JavaScript</li>
			<li style="color:#8064A2"> Phần 3: CSS3</li>
		  </ul>
        </span>
      </article>


      <article style="background-color:#3B7BC9; color:#FFFFFF; font-family:Tahoma, Geneva, sans-serif; text-align:center;">
        <h1><p style="padding-top:100px; font-size:80px; line-height:120px">Giới thiệu tổng quan HTML5</p></h1><br/>
      </article>
      
      <article>
        <header>Từ HTML đến HTML5:</header><br/><br/>
        
        - HTML ra đời từ những năm 1989.<br/><br/>
        Ví dụ:<br/>
        &lt;p&gt; This is a paragraph &lt;/p&gt;<br/><br/>
        
        - Từ 1989-1997, HTML trải qua 4 cột mốc chính. Phiên bản gần đây nhất là HTML4.<br/><br/>
		- CSS1 được công nhận là chuẩn để định dạng trang web.<br/><br/>
		- DOM trở thành chuẩn cho phép các ứng dụng JavaScript chạy thống nhất trên mọi trình duyệt.<br/><br/>

        </article>
        
        <article style="background-color:#E3EDFF; color:#000;">
			<header>HTML5</header><br/><br/>
            &#8362 HTML5 ra đời năm 2006 bởi sự hợp tác của W3C và WHATWG.<br/><br/>

            &#8362 Điểm mạnh của HTML5:<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Phù hợp trên nhiều nền tảng.<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Khả năng hỗ trợ API và DOM.<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tính nhất quán.<br/><br/>
            &#8362  Điểm yếu của HTML5 hiện tại<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Chưa hoàn thiện.<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Trình duyệt chưa hỗ trợ đầy đủ.<br/>
        </article>
        
        <article style="background-color:#E3EDFF; color:#000;">
        <header>Các lợi ích mới</header><br/><br/>
        &#164  Thẻ canvas.<br/><br/>
        &#164  Thẻ video và audio.<br/><br/>
        &#164  Hỗ trợ lưu trữ offline.<br/><br/>
        &#164  Các thẻ đặc biệt như article, footer, header, nav, section.<br/><br/>
        &#164  Nhiều dạng form control mới như calendar, date, time, email, url, search…<br/><br/>

        </article>
        
        
      <article  style="background-color:#4BACC6; color:#FFFFFF; font-family:'MS Serif', 'New York', serif">
        <h1><p style="padding-top:100px; font-size:80px; line-height:100%">Bố cục một trang Web</p></h1>
      </article>
      


      
		<article style="background-color:#E3EDFF; color:#000;">
        <header>Bố cục một trang web phổ biến</header>
        <br/>        <br/>
        <img src="images/Picture3.png" width="90%"/>
        </article>
        
        
        <article style="background-color:#E3EDFF; color:#000;">
        <header>Khai báo HTML	</header><br/><br/>
        - Định nghĩa kiểu tài liệu (DOCTYPE)<br/><br/>

        - HTML4:<br/>
        &lt;!DOCTYPE&nbsp;HTML&nbsp;PUBLIC&nbsp;&#x201c;-//W3C//DTD&nbsp;HTML&nbsp;4.01 &nbsp;Transitional//EN&#x201d;<br/>
        &#x201c;http://www.w3.org/TR/html4/loose.dtd&#x201d;&gt;<br/><br/>
    
        - HTML5:&nbsp;<br/>
        &lt;!DOCTYPE&nbsp;html&gt;<br/>
        </article>
        
        <article style="background-color:#E3EDFF; color:#000;">
        <header>Khai báo HTML5</header><br/><br/>
        - Mã hóa nội dung:<br/><br/>

        + HTML4:<br/><br/>
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;<br/><br/>
        
        + HTML5:<br/><br/>
        &lt;meta charset=&quot;UTF-8&quot;&gt;<br/><br/>
        </article>
        
        <article style="background-color:#E3EDFF; color:#000;">
            <header>Khai báo HTML5</header><br/><br/>
            - Khai báo Javascipt<br/><br/>
    
            + HTML4:<br/><br/>
            &lt;script type=&quot;text/javascript&quot; src=&quot;file.js&quot;&gt;&lt;/script&gt;<br/><br/>
            
            + HTML5:<br/><br/>
            &lt;script src=&quot;file.js&quot;&gt;&lt;/script&gt;
        </article>
        
        <article style="background-color:#E3EDFF; color:#000;">
            <header>Khai báo HTML5</header><br/><br/>
            
            - Khai báo CSS<br/><br/>
            
            + HTML4:<br/><br/>
            &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;file.css&quot;&gt;<br/><br/>
            
            + HTML5:<br/><br/>
            &lt;link rel=&quot;stylesheet&quot; href=&quot;file.css&quot;&gt;
        </article>


        
        
        <article style="background-color:#E3EDFF; color:#000;">
        <header>Các thẻ mới định dạng trang web</header><br/><br/>
		<span style="font-size:40px; line-height:70px">
            - &nbsp;&nbsp;&lt;header&gt;<br/>
            - &nbsp;&nbsp;&lt;nav&gt;<br/>
            - &nbsp;&nbsp;&lt;section&gt;<br/>
            - &nbsp;&nbsp;&lt;article&gt;<br/>
            - &nbsp;&nbsp;&lt;aside&gt;<br/>
            - &nbsp;&nbsp;&lt;footer&gt;<br/>
		</span>        
        </article>


        <article style="background-color:#E3EDFF; color:#000;">
        <header>Thẻ Dialog</header><br/><br/>
        - &lt;dialog&gt;  bắt đầu hộp thoại.<br/><br/>
        - &lt;dt&gt;  xác định người nói.<br/><br/>
        - &lt;dd&gt;  chứa nội dung đàm thoại.<br/><br/>
        
        &lt;dialog&gt;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;Worm.NET&nbsp;&lt;/dt&gt;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;Hello,&nbsp;PC&lt;/dd&gt;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;PC&nbsp;&lt;/dt&gt;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;Don&#x2019;t&nbsp;attack&nbsp;me!&nbsp;I&nbsp;have&nbsp;firewall&nbsp;installed!&nbsp;&lt;/dd&gt;<br/>
        &lt;/dialog&gt;

        </article>
        
        
        <article style="background-color:#E3EDFF; color:#000;">
        <header>Minh họa thẻ Dialog</header><br/><br/>
        <dialog>
            <dt>Hạt Dẻ:</dt>
            <dd>Bé Dâu, lên xe.</dd><br/>
            
            <dt>Bé Dâu:</dt>
            <dd>Anh Hạt Dẻ, chờ Dâu với.</dd><br/>
            
            <dt>Hạt Dẻ:</dt>
            <dd>Em nhanh nhanh đi, anh Hạt Dẻ bỏ Dâu ráng chịu nha.</dd><br/>
            
            <dt>Bé Dâu:</dt>
            <dd>Hic hic hic... Anh Hạt Dẻ bỏ Dâu một mình.</dd><br/>
        </dialog>
        </article>
        

        <article style="background-color:#E3EDFF; color:#000;">
        <header>Thẻ Audio:</header><br/><br/>
        <img src="./images/Picture4.png" width="800"/><br/><br/>
        &lt;audio src=&quot;song.ogg&quot; controls=&quot;controls&quot;&gt;<br/>Trình duyệt bạn không hỗ trợ thẻ audio.<br/>&lt;/audio&gt;<br/>
        <br/><br/>
        <audio src="./src/song.ogg" controls="controls">
	        Trình duyệt bạn không hỗ trợ thẻ audio.
        </audio>
        </article>
        
        <article style="background-color:#E3EDFF; color:#000;">
	        <header>Chú ý</header><br/><br/>
            <b>Để chạy audio trên Internet Explorer và Safari, phải dùng file mp3.</b><br/><br/>
            &lt;audio controls=&quot;controls&quot;&gt;<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;source src=&quot;song.ogg&quot; type=&quot;audio/ogg&quot; /&gt;<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;source src=&quot;song.mp3&quot; type=&quot;audio/mpeg&quot; /&gt;<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Trình duyệt bạn không hỗ trợ thẻ audio<br/>
            &lt;/audio&gt;

        </article>
        
        <article style="background-color:#E3EDFF; color:#000;">
        <header>Thẻ Video:</header><br/>
        <img src="./images/Picture5.png" width="800"/><br/>
		&lt;video src=&quot;movie.ogg&quot; width=&quot;320&quot; height=&quot;240&quot; controls=&quot;controls&quot;&gt;<br/>Trình duyệt của bạn không hỗ trợ video<br/>&lt;/video&gt;<br/>
        <video src="./src/movie.ogg" width="320" height="240" style="padding-left:200px" controls="controls">
        Trình duyệt của bạn không hỗ trợ thẻ video.
        </video>
        </article>
        
        <article style="background-color:#E3EDFF; color:#000;">
        <header>Chú ý</header><br/><br/>
        
        <b>Để nhúng video vào IE, Safari và các phiên bản mới của Chrome thì phải thêm dạng file MPEG4 và WebM.</b><br/><br/>
        &lt;video width=&quot;320&quot; height=&quot;240&quot; controls=&quot;controls&quot;&gt;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;source src=&quot;movie.ogg&quot; type=&quot;video/ogg&quot; /&gt;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;source src=&quot;movie.mp4&quot; type=&quot;video/mp4&quot; /&gt;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;source src=&quot;movie.webm&quot; type=&quot;video/webm&quot; /&gt;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Your browser does not support the video tag.<br/>
        &lt;/video&gt;

        </article>
        
        
        <article style="background-color:#C0504D; color:#FFFFFF; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif">
        <h1><p style="padding-top:100px; font-size:80px; line-height:100%">FORM 2.0</p></h1	>
        </article>        
        
        <article>
        <header>Các dạng input mới</header><br/><br/>
        ♥ &nbsp;&nbsp; Dạng Input – email:<br/>
        &lt;input type=&quot;email&quot; name=&quot;user_email&quot; /&gt;<br/><br/>
        E-mail:
		<form>
        <input type="email" name="user_email"/><button type="submit">Submit</button>
		</form>
        <br/><br/>
        ♥ &nbsp;&nbsp; Dạng Input – url:<br/>
        &lt;input type=&quot;url&quot; name="google&quot; /&gt;<br/>
        <br/>
        URL:
		<form>
        <input type="url" name="google"/><button type="submit">Submit</button>
		</form>
        </article>


        <article>
        <header>Các dạng input mới</header><br/><br/>
        ♥ &nbsp;&nbsp; Dạng Input – number:<br/>
        &lt;input type=&quot;number&quot; name=&quot;points&quot; min=&quot;1&quot; max=&quot;10&quot; /&gt;<br/><br/>
        Điểm: 
        <form>
        <input type="number" name="points" min="0" max="10"/>
		</form>
        <br/>
        ♥ &nbsp;&nbsp; Dạng Input – range:<br/>
        &lt;input type=&quot;range&quot; name=&quot;points&quot; min=&quot;1&quot; max=&quot;10&quot; /&gt;<br/>
        <br/>
        Điểm:
		<form oninput="rs.value = parseInt(points.value)">
        0<input type="range" name="points" min="0" max="10"/>10&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<output name="rs">0</output>

		</form>
        </article>
        
        
        <article>
        <header>Dạng Input - Date Pickers</header><br/>
        - date: Chọn date, month và year.<br/>
        - month:  Chọn month và year.<br/>
        - week: Chọn week và year.<br/>
        - time: Chọn time (hour và minute).<br/>
        - datetime: Chọn time, date, month và year (UTC time).<br/>
        - datetime-local: Chọn time, date, month và year (local time).<br/><br/>
        
        &lt;input type=&quot;time&quot; name=&quot;user_date&quot; /&gt;<br/><br/>
        Giờ:&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="time" name="user_date"/><br/><br/>
                
        &lt;input type=&quot;date&quot; name=&quot;user_date&quot; /&gt;<br/><br/>
        Ngày:&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="date" name="user_date"/>

        </article>
        
        <article>
        <header>Thuộc tính autocomplete</header><br/><br/>

        User Name: <br/><br/><br/>
        
        &lt;input type=&quot;text&quot; name=&quot;username&quot; autocomplete=&quot;on&quot; /&gt;<br/>
        <input type="text" name="username" autocomplete="on" /><br/><br/><br/>
        
        &lt;input type=&quot;text&quot; name=&quot;username&quot; autocomplete=&quot;off&quot; /&gt;<br/>
        <input type="text" name="username" autocomplete="off"/><br/>
        </article>
        

	    <article>
        <header>Các thuộc tính khác</header><br/><br/>

        <u>Thuộc tính min, max, step:</u><br/><br/>
        
        &lt;input type=&quot;number&quot;&quot; min=&quot;0&quot; max=&quot;10&quot; step=&quot;3&quot; /&gt;<br/><br/>
        <input type="number" min="0" max="10" step="3" /><br/><br/><br/>
        
        <u>Thuộc tính pattern:</u><br/><br/>
        &lt;input type=&quot;text&quot; pattern=&quot;[A-z]{3}&quot; title=&quot;3 ký tự mã nước&quot; /&gt;<br/><br/>
        <form><input type="text" name="code" pattern="[A-z]{3}" title="3 ký tự mã quốc gia" />    	    <button type="submit">Submit</button></form><br/><br/>
        
        </article>
        
        
        <article>
        <header>Thẻ keygen</header><br/><br/>

        - Thẻ keygen sẽ một cặp sinh mã. <br/>
		- Khi 1 form được submit, có 2 khóa được gieo, 1 khóa là dạng private và 1khóa là dạng public.<br/><br/>

        <form action="demo.php" method="get">
            Username: <input type="text" name="usr_name"/><br/>
            Encryption: <keygen id="security" name="security" />
            <button type="submit">Submit</button>
        </form>

        <br/><br/>
		- Hiện tại, các trình duyệt hỗ trợ thẻ keygen không đủ tốt cho khả năng bảo mật.
        </article>
        
        
        
        <article>
        <header>Các thuộc tính khác</header><br/><br/>

        <u>Thuộc tính placeholder:</u><br/><br/>
        
        &lt;input type=&quot;search&quot; placeholder=&quot;Search W3Schools&quot; /&gt;<br/><br/>
        <input type="search" name="user_search" placeholder="Search W3Schools" /><br/><br/>
        
        <u>Thuộc tính required:</u><br/><br/>
        &lt;input type=&quot;text&quot; required=&quot;required&quot; /&gt;<br/><br/>
        <form>
        <input type="text" name="usr_name" required="required" />
        <button type="submit" style="font-size:25px">Submit</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </form>
        </article>
        
        
        
        

      <article style="background-color:#89B101; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-weight:bolder; color:#FFFFFF">
        <h1><p style="padding-top:100px; font-size:100px; line-height:100%;">Javascript</p></h1>
      </article>








      <article id="new-selectors">
        <header>
            <span class="js">JS</span>
            <h1>New Selectors</h1>
        </header>
        
        <div class="pre">var elements = document.getElementsByClassName('entry');</div>
        <div class="pre">var elements = document.querySelectorAll("ul li:nth-child(odd)");</div>
        <div class="pre">var first_td = document.querySelector("table.test > tr > td");</div>
        <p style="font-size:24px">Ví dụ:</p>
        <textarea id="id_textarea_1" placeholder="Hiển thị kết quả..."></textarea>
        <button id="click-id_textarea_1" onclick="click_newselectors()">Click Here</button>
      </article>
      
	  <article id="web-storage">
        <header>
            <span class="js">JS</span>
            <h1>Web Storage</h1>
        </header>
        
        <div class="pre">
        	textarea.addEventListener('keyup', function () {
              window.localStorage['value'] = area.value;
              window.localStorage['timestamp'] = (new Date()).getTime();
            }, false);
            textarea.value = window.localStorage['value'];
        </div>
        <p style="font-size:24px">Ví dụ:</p>
        <section>
            <p>Giá trị từ sessions trước:</p>
            <ul id="previous" style="font-size:22px"></ul>
        </section>
        <section>
            <div>
              <label for="session" class="label">sessionStorage:</label>
              <input type="text" name="session" value="" id="session" />          
            </div>
            <div>
              <label for="local" class="label">localStorage:</label>
              <input type="text" name="local" value="" id="local" />
            </div>
            <button id="" onClick="Save_Storage_Local()">Lưu Storage</button>
            <button id="clear" onClick="Clear_Storage_Local()">Xóa Storage</button>
        </section>
        <script>
			getStorage('session');
			getStorage('local');
        </script>
      </article>
      
      <article id="web-sql-database-storage">
        <header>
            <span class="js">JS</span>
            <h1>Web SQL Database Storage</h1>
        </header>
        
        <div class="pre">
            var db = window.openDatabase("Database Name", "Database Version");<br>
            db.transaction(function(tx) {
              tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
            });
        </div>
        <p style="font-size:24px">Ví dụ:</p>
        <button onclick="webSqlSample.createTable()">Create Table</button><br>
        <input id="todoitem" type="text">
        <button onclick="webSqlSample.newRecord()">Insert Record</button><br>
        <button onclick="webSqlSample.dropTable()">Drop Table</button>
        <ul id="db-results" class="record-list"></ul>
		<div id="db-log"></div>
        <script>		
			var webSqlSample = (function() {
				var db;
				var logs = document.getElementById('db-log');
				if (window.openDatabase) {
					db = openDatabase("DBTest", "1.0", "HTML5 Database API example", 200000);
					showRecords();
				}
				document.getElementById('db-results').addEventListener('click', function(e) { e.preventDefault(); }, false);
			
				function onError(tx, error) {	
					logs.innerHTML = '<p class="error">Error: ' + error.message + '</p>';
				}
				function showRecords() {
					document.getElementById('db-results').innerHTML = '';
					db.transaction(function(tx) {
						tx.executeSql("SELECT * FROM Table1Test", [], function(tx, result) {
							for (var i = 0, item = null; i < result.rows.length; i++) {
								item = result.rows.item(i);
								document.getElementById('db-results').innerHTML +=
									'<li><span contenteditable="true" onkeyup="webSqlSample.updateRecord('+item['id']+', this)">'+
									item['text'] + '</span> <a href="#" onclick="webSqlSample.deleteRecord('+item['id']+')">[Delete]</a></li>';
							}
						});
					});
				}
				function createTable() {
					db.transaction(function(tx) {
						tx.executeSql("CREATE TABLE Table1Test (id REAL UNIQUE, text TEXT)", [],
							function(tx) {
								logs.innerHTML = "<p>'Table1Test' created!</p>";
							},
							onError);
					});
				}
				function newRecord() {
					var num = Math.round(Math.random() * 10000); // random data
					db.transaction(function(tx) {
						tx.executeSql("INSERT INTO Table1Test (id, text) VALUES (?, ?)", [num, document.querySelector('#todoitem').value],
							function(tx, result) {
								logs.innerHTML = '';
								showRecords();
							},
							onError);
					});
				}
				function updateRecord(id, textEl) {
					db.transaction(function(tx) {
						tx.executeSql("UPDATE Table1Test SET text = ? WHERE id = ?", [textEl.innerHTML, id], null, onError);
					});
				}
				function deleteRecord(id) {
					db.transaction(function(tx) {
						tx.executeSql("DELETE FROM Table1Test WHERE id=?", [id],
							function(tx, result) { showRecords() },
							onError);
					});
				} 
				function dropTable() {
					db.transaction(function(tx) {
						tx.executeSql("DROP TABLE Table1Test", [],
							function(tx) {
								logs.innerHTML = "<p>'Table1Test' deleted!</p>";
								showRecords() ;
							},
							onError);
					});
				}
				return {
					newRecord: newRecord,
					createTable: createTable,
					updateRecord: updateRecord,
					deleteRecord: deleteRecord,
					dropTable: dropTable
				}
			})();
        </script>
      </article>
      
      <article id="off-app-cache">
        <header>
            <span class="js">JS</span>
            <h1>Offline Application Cache API</h1>
        </header>
        
        <div class="pre">&lt;html manifest="cache.appcache"&gt;</div>
        <div class="pre">
        	window.applicationCache.addEventListener('updateready', function(e) {<br>
              if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {<br>
                window.applicationCache.swapCache();<br>
                if (confirm('A new version of this site is available. Load it?')) {<br>
                  window.location.reload();
                }
              }<br>
            }, false);
        </div>
        <p style="font-size:22px">cache.appcache:</p>
        <div class="pre">
        	CACHE MANIFEST<br>

            CACHE:<br>
            index.html<br>
            style/default.css<br>
            images/backgound.png<br>
            
            NETWORK:<br>
            server.cgi
        </div>
      </article>
      
      <article id="web-workers">
        <header>
            <span class="js">JS</span>
            <h1>Web Workers</h1>
        </header>
        
        <p style="font-size:22px">main.js:</p>
        <div class="pre">
        	var worker = new Worker('extra_work.js');<br>
          	worker.onmessage = function (event) { alert(event.data); };
        </div>
        <p style="font-size:22px">extra_work.js:</p>
        <div class="pre">
        	// do some work; when done post message.<br>
          	// some_data could be string, array, object etc.<br>
          	postMessage(some_data);
        </div>
		<p style="font-size:24px">Ví dụ: Vòng tròn vẫn xoay trong khi chương trình vẫn đang chạy</p>
        <article id="article_canvas">
          <p>Số được tìm thấy: <span id="status">0</span></p>
          <div>
          	<button onClick="start_canvas()">start canvas</button>
          	<button id="toggleWorker" onClick="start_worker()">start worker</button>
          </div>
        </article>
      </article>
      
      <article id="notifications">
        <header>
            <span class="js">JS</span>
            <h1>Notifications</h1>
        </header>

        <div class="pre">
        	if (window.webkitNotifications.checkPermission() == 0) {<br>
              // you can pass any url as a parameter<br>
              window.webkitNotifications.createNotification(tweet.picture, tweet.title,
                  tweet.text).show();<br>
            } else {<br>
              window.webkitNotifications.requestPermission();<br>
            }
        </div>    
		<p style="font-size:24px">Ví dụ: </p>
        <button id="request-permission" onClick="request_permission()">Set notifications for this page</button>
        <p>Nhập vào username của tài khoản twitter của bạn để xem bình luận cuối cùng</p>
        <input type="text" id="username" placeholder="username" style="font-size:24px"/>
        <button id="show-twitter" onClick="readTweets()">Show tweet notifications</button>
      </article>
      
      <article id="native-drag-drop">
        <header>
            <span class="js">JS</span>
            <h1>Native Drag & Drop</h1>
        </header>

        <div class="pre">
        	var drop = document.querySelector('#drop-area');<br>
			addEvent(drop, 'dragover', cancel);<br>
			addEvent(drop, 'dragenter', cancel);<br>		 
			addEvent(drop, 'drop', function (e) {<br>
			  if (e.preventDefault) e.preventDefault(); <br>
			  this.innerHTML += e.dataTransfer.getData('Text') ;<br>
			  return false;	});
        </div>    
		<p style="font-size:24px">Ví dụ:</p>
        <img src="images/Untitled.jpg" style="float:left"/>
        <div class="drag" draggable="true" id="yunero"><img src="images/yunero_by_crutz-1.jpg" /></div>
        <div id="drop-area" style="float:left"></div>
        <script>
			//Firefox and friends needs preventDefault on the event, and IE requires the return false.
			function cancel(e) {
			  if (e.preventDefault) {
				e.preventDefault();
			  }
			  return false;
			}
			var dragItems = document.querySelectorAll('[draggable=true]');
			for (var i = 0; i < dragItems.length; i++) {
			  addEvent(dragItems[i], 'dragstart', function (event) {
				// store the ID of the element, and collect it on the drop later on
				event.dataTransfer.setData('Text', this.innerHTML);
			  });
			}
			var drop = document.querySelector('#drop-area');
			 
			// Tells the browser that we *can* drop on this target
			addEvent(drop, 'dragover', cancel);
			//Do the same for dragenter to support IE
			addEvent(drop, 'dragenter', cancel);
			 
			addEvent(drop, 'drop', function (e) {
			  if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting off to the text.
			  //the default key is set to Text. So this might be the value of an href of an <a> element, or it might be <img> src address.
			  this.innerHTML += '<p>' + e.dataTransfer.getData('Text') + '</p>';
			  return false;
			});
        </script>       
      </article>
      
      <article id="desktop-drag-in">
        <header>
            <span class="js">JS</span>
            <h1>Desktop Drag-In (File API)</h1>
        </header>

        <div class="pre">
        	document.querySelector('#dropzone').addEventListener('drop', function(e) {<br>
          	var reader = new FileReader();<br>
          	reader.onload = function(evt) {<br>
            	document.querySelector('img').src = evt.target.result;
          	};<br>
          reader.readAsDataURL(e.dataTransfer.files[0]);
        }, false);
        </div>    
		<p style="font-size:24px">Ví dụ: Kéo và thả image từ desktop vào khung dưới</p>
        <div id="drop-area-1"></div>
        <p id="status-desk-drag-drop">File API & FileReader API not supported</p>
        <script>
			var holder = document.getElementById('drop-area-1'),
				state = document.getElementById('status-desk-drag-drop');
			
			if (typeof window.FileReader === 'undefined') {
			  state.className = 'fail';
			} else {
			  state.className = 'success';
			  state.innerHTML = 'File API & FileReader available';
			}
			 
			holder.ondragover = function () { this.className = 'hover'; return false; };
			holder.ondragend = function () { this.className = ''; return false; };
			holder.ondrop = function (e) {
			  this.className = '';
			  e.preventDefault();
			
			  var file = e.dataTransfer.files[0],
				  reader = new FileReader();
			  reader.onload = function (event) {
				holder.style.background = 'url(' + event.target.result + ') no-repeat center';
			  };
			  reader.readAsDataURL(file);
			  return false;
			};
        </script>
      </article>
      
      <article id="desktop-drag-out">
        <header>
            <span class="js">JS</span>
            <h1>Desktop Drag-Out</h1>
        </header>

        <div class="pre">
        	&lt;a href="src/star.mp3" draggable="true" class="dragout"<br>
			   data-downloadurl=&quot;MIMETYPE:FILENAME:ABSOLUTE_URI_TO_FILE&quot;&gt;download&lt;/a&gt;
        </div>
        <div class="pre">
        	var files = document.querySelectorAll('.dragout');<br>
            for (var i = 0, file; file = files[i]; ++i) {<br>
              file.addEventListener('dragstart', function(e) {<br>
                e.dataTransfer.setData('DownloadURL', this.dataset.downloadurl);<br>
              }, false);<br>
            }
        </div>  
		<p style="font-size:22px">Ví dụ: Kéo và thả file từ trình duyệt ra desktop</p>
        <div class="example">
        	Kéo từng file ra desktop:
            <a href="javascript:void(0)" class="dragout" data-downloadurl="application/pdf:Chrome3DGlasses.pdf:http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/intl/en/landing/chrome/cadie/glasses.pdf" draggable="true">.pdf File</a>
            <a href="javascript:void(0)" class="dragout" data-downloadurl="audio/mpeg:star.mp3:http://slides.html5rocks.com/src/star.mp3" draggable="true">.mp3 File</a>
        </div>
        <script>
			(function() {
				var files = document.querySelectorAll('.dragout');
				for (var i = 0, file; file = files[i]; ++i) {
					file.setAttribute('draggable', 'true'); // Don't really need, but good practice.
					file.addEventListener('dragstart', function(evt) {
						evt.dataTransfer.setData('DownloadURL', this.getAttribute('data-downloadurl'));
					}, false);
				}
			})(); 
        </script>
      </article>
      
      <article id="audio-video">
        <header>
       		<span class="html">HTML</span>
            <span class="js">JS</span>
            <h1>Audio + Video</h1>
        </header>

        <div class="pre">
        	&lt;audio id="audio" src="sound.mp3" controls&gt;&lt;/audio&gt;<br>
			document.getElementById("audio").muted = false;
        </div>
        <div class="pre">
        	&lt;video id="video" src="movie.webm" autoplay controls&gt;&lt;/video&gt;<br>
			document.getElementById("video").play();
        </div>
		<p style="font-size:22px">Ví dụ: </p>
        <div id="video-column" class="center">
        	<video width="390" id="clip-demo" controls src="./src/chrome_japan.mp4"></video>
        	<div class="media-buttons">
            	<input type="button" id="play-button" onclick="PlayVideo()" value="Play" />
                <input type="button" id="pause-button" onclick="PauseVideo()" value="Pause" />
                <input type="button" id="mute" onclick="MuteUnmute()" value="Mute" />
            </div>
        </div>
        <div id="audio-column" class="center">
        	<audio width="670" id="audio-demo" controls src="./src/star.mp3"></audio>
        	<div class="media-buttons">
            	<input type="button" id="audio-play-button" onclick="PlayAudio()" value="Play" />
                <input type="button" id="audio-pause-button" onclick="PauseAudio()" value="Pause" />
                <input type="button" id="audio-mute" onclick="MuteUnmuteAudio()" value="Mute" />
            </div>
        </div>
        <script>					
			var videoClip = document.getElementById('clip-demo');
			var playButton = document.getElementById('play-button');
			var pauseButton = document.getElementById('pause-button');
			
			var audioClip = document.getElementById('audio-demo');
			var audioPlayButton = document.getElementById('audio-play-button');
			var audioPauseButton = document.getElementById('audio-pause-button');
        </script>
      </article>
      
      <article id="canvas-2d" style="background-color:#F3F9FB;">
        <header>
       		<span class="html">HTML</span>
            <span class="js">JS</span>
            <h1>Canvas 2D</h1>
        </header>

        <div class="pre" style="font-size:18px">
        	&lt;canvas id="canvas" width="838" height="220"&gt;&lt;/canvas&gt;<br>
			&lt;script&gt;
              var canvasContext = document.getElementById("canvas").getContext("2d");<br>
              canvasContext.fillRect(250, 25, 150, 100);<br>              
              canvasContext.beginPath();<br>
              canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);<br>
              canvasContext.lineWidth = 15;<br>
              canvasContext.lineCap = 'round';<br>
              canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';<br>
              canvasContext.stroke();<br>
            &lt;/script&gt;
        </div>
		<p style="font-size:20px; letter-spacing:0px">Ví dụ: </p>
        <canvas id="canvas" width="838" height="220"></canvas>
		<script>
          var canvasContext = document.getElementById("canvas").getContext("2d");
          canvasContext.fillRect(250, 25, 150, 100);
      
          canvasContext.beginPath();
          canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
          canvasContext.lineWidth = 15;
          canvasContext.lineCap = 'round';
          canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
          canvasContext.stroke();
        </script>
      </article>
      
      
      
      <article style="background-color:#89B101; background-color:#000000; color:#FFFFFF; background-image:url(images/CSS3-Minimalistic-Navigation-Menu.jpg);">
        <h1><p style="padding-top:100px; font-size:80px; line-height:100%;"></p></h1>
      </article>
      
      <article id="introduce-css3">
        <header>
       		<span class="css">CSS</span>
            <h1>CSS3 có gì mới?</h1>
        </header><br/><br/>
        <section>
        	<ul id="toc-list">
       			 <li>
                    <a data-hash="offline-storage-title">Module</a>
       			 </li>
        		<li>
                	<a data-hash="offline-storage-title">Tiền tố</a>            
        		</li>
                <img src="images/prefix.jpg" style="margin-left:150px"/>
            </ul>
        </section>
		
      </article>
      <article id="web-fonts">
        <header>
       		<span class="css">CSS</span>
            <h1>Webfonts</h1>
        </header>

        <div class="pre">
        	@font-face {<br>
              font-family: 'LeagueGothic';<br>
              src: url(LeagueGothic.otf);<br>
            }<br>           
            @font-face {<br>
              font-family: 'Droid Sans';<br>
              src: url(Droid_Sans.ttf);<br>
            }<br>    
            header {<br>
              font-family: 'LeagueGothic';<br>
            }
        </div>
		<p>Ví dụ: </p>
        <div id="fontface-sample" class="example-css">
        	<span>Demo Lập Trình Hiện Đại HTML5 2011</span>
        </div>
      </article>
      
      <article id="css-columns">
        <header>
       		<span class="css">CSS</span>
            <h1>Columns</h1>
        </header>

        <div class="pre">
        	-webkit-column-count: 
            <span id="columns-no-value">
				<span class="lit">2</span>
			</span>; <input type="range" min="1" max="6" value="2" onChange="changeColumn(event)" /><br>
            -webkit-column-rule: 1px solid #bbb;<br>
            -webkit-column-gap: 2em;<br>
        </div>
        <div id="columns-no-example" class="example-css">
        	<p>In March 1936, an unusual confluence of forces occurred in Santa Clara County.</p>
            <p>A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.</p>          
            <p>Then came the wind.</p>          
            <p>This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley. It froze traffic, as drivers found themselves lost in a soft, muted whiteout. Only the streetcar, its path predetermined, passed on...</p>
        </div>
      </article>
      
      <article id="css-shadows">
        <header>
       		<span class="css">CSS</span>
            <h1>Shadows</h1>
        </header>

        <div class="pre">
        	<div style="float:left">
                text-shadow: <br>
                  rgba(64, 64, 64, 0.5) <br>
                  <span id="shadows-text-x-value">
                    <span class="lit">0</span>
                  </span>px
                  <input type="range" min="-9" max="9" value="0" onChange="changeShadow(event)" id="shadows-text-x"/><br>
                  <span id="shadows-text-y-value">
                    <span class="lit">0</span>
                  </span>px
                  <input type="range" min="-9" max="9" value="0" onChange="changeShadow(event)" id="shadows-text-y"/><br>
                  <span id="shadows-text-size-value">
                    <span class="lit">0</span>
                  </span>px; 
                  <input type="range" min="0" max="9" value="0" onChange="changeShadow(event)" id="shadows-text-size"/>
             </div>
             <div style="float:right">
                 box-shadow: <br>
                  rgba(0, 0, 128, 0.25) <br>
                  <span id="shadows-box-x-value">
                    <span class="lit">0</span>
                  </span>px
                  <input type="range" min="-9" max="9" value="0" onChange="changeShadow(event)" id="shadows-box-x"/><br>
                  <span id="shadows-box-y-value">
                    <span class="lit">0</span>
                  </span>px
                  <input type="range" min="-9" max="9" value="0" onChange="changeShadow(event)" id="shadows-box-y"/><br>
                  <span id="shadows-box-size-value">
                    <span class="lit">0</span>
                  </span>px; 
                  <input type="range" min="0" max="9" value="0" onChange="changeShadow(event)" id="shadows-box-size"/>
              </div>
        </div>
		<p>Ví dụ: </p>
        <div id="shadow-example" class="example-css">
        	Shadows Example
        </div>
      </article>
	  
      <article id="css-stroke">
        <header>
       		<span class="css">CSS</span>
            <h1>Text stroke</h1>
        </header>

        <div class="pre">
          div {<br>
              -webkit-text-fill-color: black;<br>
              -webkit-text-stroke-color: red;<br>
              -webkit-text-stroke-width: 
              <span id="text-stroke-value">
        		<span class="lit">0.00</span>
	          </span>px;<input type="range" min="0" max="50" value="0" onChange="changeTextStroke()" id="text-stroke"/><br>
            }
        </div>
		<p>Ví dụ: </p>
        <div id="text-stroke-example" class="example-css">
        	Text stroke Example
        </div>
      </article>
	  
      <article id="rounded-corners">
        <header>
       		<span class="css">CSS</span>
            <h1>Rounded corners</h1>
        </header>

        <div class="pre">
          border-radius:
          <span id="shadows-text-x-value">
            <span class="lit">0</span>
          </span>px;
          <input type="range" min="0" max="146" value="0" onChange="handleCorner(event)" id="rounded-border"/>
        </div>
		<p>Ví dụ: </p>
        <div id="rounded-corners-example" class="example-css" style="text-align:center">
        	Rounded corners Example
        </div>
      </article>
      
      <article id="css-opacity">
      	<header><span class="css">CSS</span> <h1>Opacity</h1></header>
      	<section>
      	<div class="pre">
        	color: rgba(255, 0, 0,
            <span id="opacity-color-value">
            <span class="lit">0.75</span>
            </span>);
            <input id="opacity-color" type="range" min="0" max="100" value="75" onchange="changeOpacity()">
        </div>
        <div class="pre">
            background: rgba(0, 0, 255,
            <span id="opacity-background-value">
            <span class="lit">0.75</span>
            </span>);
            <input id="opacity-background" type="range" min="0" max="100" value="75" onchange="changeOpacity()">
         </div>
         
         <div id="opacity-body">
         	<div id="opacity-example">
                Opacity Example
            </div>
         </div>
         </section>
      </article>
      
      <article id="gradients">
      <header>
       		<span class="css">CSS</span>
            <h1>Gradients</h1>
        </header>
        <div class="pre">background: -webkit-gradient(linear, left top, left bottom, from(#a600a6), to(#00ac6b), color-stop(0.5, #ffe800), color-stop(0.5, #ffe800));</div>
        <div id="gradients-linear-example" class="example"></div>
        <div class="pre">background: -webkit-gradient(radial, 380 50, 0, 380 50, <span id="gradients-radial-value">470</span>, from(red), to(#000));
        <input id="gradients-radial" type="range" min="1" max="800" value="200" onchange="changeGradients(event)"></div>
        
        <div id="gradients-radial-example" class="example"></div>
      </article>
      
      <article id="box-reflect">
      	<header>
       		<span class="css">CSS</span>
            <h1>Box-reflect</h1>
        </header>
        <div class="pre">
            -webkit-box-reflect: below
            <span id="web20-offset-value">
            <span class="lit">20</span>
            </span>
            <input id="web20-offset" type="range" min="10" max="50" value="20" onchange="changeWeb20(event)">
            
            </br>-webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255,
            <span id="web20-reflect-value">
            <span class="lit">0.5</span>
            </span>)))
            <input id="web20-reflect" type="range" min="0" max="100" value="50" onchange="changeWeb20(event)">
         </div>
         <div class="example">
              <div id="logo-container">
                <div id="web20-google">
                  Box Reflection
                </div>
              </div>
            </div>
      </article>
      
      <article id="css-transitions">
      <header>
       		<span class="css">CSS</span>
            <h1>Transitions</h1>
        </header>
        <p></p>
        <div class="transitions example">
        	<div id="transitions-box-1"></div>
            </div>
        <div class="pre">
            #box.left{ margin-left: 0;}
            </br>#box.right{ margin-left: 1000px;}
            </br></br>document.getElementById('box').className = 'left'; <button onclick="transitionLeft(1)"><span class="typ">Left</span></button>
            </br>document.getElementById('box').className = 'right';<button onclick="transitionRight(1)"><span class="typ">Right</span></button>
        </div>
        <div class="transitions example">
        	<div id="transitions-box-2"></div>
        </div>
        <div class="pre">
            #box{ -webkit-transition: margin-left 1s ease-in-out;}
            </br></br>document.getElementById('box').className = 'left'; <button onclick="transitionLeft(2)"><span class="typ">Left</span></button>
            </br>document.getElementById('box').className = 'right';<button onclick="transitionRight(2)"><span class="typ">Right</span></button>
        </div>              
      </article>
      
      <article id="css-transforms">
        <header>
       		<span class="css">CSS</span>
            <h1>Transforms</h1>
        </header>
        <div class="pre" style="font-size:20px">
			#threed-example {<br>
              -webkit-transform: rotateZ(5deg);<br>
              -webkit-transition: -webkit-transform 2s ease-in-out;<br>
            }<br>
            #threed-example:hover {<br>
              -webkit-transform: rotateZ(-5deg);<br>
            }
        </div>
		<p>Ví dụ: </p>
        <div class="pre" style="font-size:20px" id="threed-example">
          	-webkit-transform: rotateY(45deg);<br>
            -webkit-transform: scaleX(25deg);<br>
            -webkit-transform: translate3d(0, 0, 90deg);<br>
            -webkit-transform: perspective(500px)
        </div>
        
      </article>
      
      <article id="css-animation">
        <header>
       		<span class="css">CSS</span>
            <h1>Animations</h1>
        </header>

        <div class="pre" style="font-size:18px">
          @-webkit-keyframes pulse {<br>
             from { color: green;<br>
               font-size: 100%;}<br>
             to { color: red;<br>
               font-size: 500%;}}<br>            
            div {<br>
              -webkit-animation-name: pulse;<br>
              -webkit-animation-duration: 2s;<br>
              -webkit-animation-iteration-count: infinite;<br>
              -webkit-animation-timing-function: ease;<br>
              -webkit-animation-direction: alternate;<br>
            }
        </div>
		<p>Ví dụ: </p>
        <div id="animation-example" class="example-css">
        	BOOOOM!!!
        </div>
      </article>
      







      

      




      
      <article style="background-color:#89B101; text-align:center">
      
      
        <h3>
			<br/><br/><br/>
        </h3>  
        <span style="font-size:60px; color:#FFF; line-height:80px;">Cảm ơn các bạn <br/>đã chú ý theo dõi</span>
        
        
      </article>

    </section>

  </body>
</html>
